<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getFinanceRecordListAPI, deleteFinanceRecordAPI } from '@/pagesOrgan/services/finance'
import type { FinanceRecord, FinanceRecordQuery } from '@/types/finance'
import FinanceRecordItem from './components/FinanceRecordItem.vue'

const incomeRecords = ref<FinanceRecord[]>([])
const isLoading = ref(false)
const recordQuery = ref<FinanceRecordQuery>({
  pageNum: 1,
  pageSize: 10,
  expenseType: '2',
})
const hasMore = ref(true)

// 获取收入记录
const fetchIncomeRecords = async (reset = false) => {
  if (reset) {
    recordQuery.value.pageNum = 1
    hasMore.value = true
    incomeRecords.value = []
  }
  if (!hasMore.value || isLoading.value) {
    return
  }

  try {
    isLoading.value = true
    const res = await getFinanceRecordListAPI(recordQuery.value)

    if (reset) {
      incomeRecords.value = res.data.rows
    } else {
      incomeRecords.value = [...incomeRecords.value, ...res.data.rows]
    }

    hasMore.value = incomeRecords.value.length < res.data.total
    recordQuery.value.pageNum = recordQuery.value.pageNum ?? 1
    recordQuery.value.pageNum++
  } catch (error) {
    console.error('获取收入记录失败:', error)
  } finally {
    isLoading.value = false
  }
}

// 删除记录
const handleDelete = async (id: string) => {
  const confirmRes = await uni.showModal({
    title: '确认删除',
    content: '确定要删除这条收入记录吗？',
  })

  if (confirmRes.confirm) {
    try {
      await deleteFinanceRecordAPI(id)
      incomeRecords.value = incomeRecords.value.filter((record) => record.id !== id)
      uni.showToast({ title: '删除成功', icon: 'success' })
    } catch (error) {
      console.error('删除记录失败:', error)
      uni.showToast({ title: '删除失败', icon: 'error' })
    }
  }
}
// 跳转到添加记录页
const navigateToAddRecord = () => {
  uni.navigateTo({
    url: '/pagesOrgan/finance/add?type=2',
  })
}

// 下拉刷新
const onRefresh = () => {
  fetchIncomeRecords(true)
}

// 上拉加载更多
const onLoadMore = () => {
  fetchIncomeRecords()
}

onMounted(() => {
  fetchIncomeRecords()
})
</script>

<template>
  <view class="page-container">
    <scroll-view
      class="income-list"
      scroll-y
      @refresherrefresh="onRefresh"
      @scrolltolower="onLoadMore"
      enable-back-to-top
      refresher-enabled
      :refresher-triggered="isLoading"
    >
      <!-- 筛选区域 -->
      <view class="filter-bar">
        <text class="filter-title">收入记录</text>
      </view>

      <!-- 记录列表 -->
      <view class="record-list">
        <block v-if="incomeRecords.length > 0">
          <finance-record-item
            v-for="record in incomeRecords"
            :key="record.id"
            :record="record"
            @delete="handleDelete"
            :data-id="record.id"
          />
        </block>
        <view class="no-data" v-else-if="!isLoading">
          <text>暂无收入记录</text>
        </view>
      </view>

      <!-- 加载更多 -->
      <view class="loading-more" v-if="isLoading && incomeRecords.length > 0">
        <text>加载中...</text>
      </view>
    </scroll-view>

    <!-- 底部添加按钮 -->
    <view class="add-btn" @click="navigateToAddRecord">
      <image class="add-icon" src="@/static/images/add.png"></image>
    </view>
  </view>
</template>

<style lang="scss">
.page-container {
  height: 100vh;
  background-color: #f5f7fa;
  position: relative;
}

.income-list {
  height: 100%;
  padding: 20rpx;
  box-sizing: border-box;
}

.filter-bar {
  margin-bottom: 20rpx;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  .filter-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
}

.record-list {
  background-color: #fff;
  border-radius: 10rpx;
  overflow: visible;
  // 确保列表容器不会影响滑动
  position: relative;
  z-index: 1;
}

.no-data {
  padding: 100rpx 0;
  text-align: center;
  color: #999;
  font-size: 28rpx;
}

.loading-more {
  padding: 20rpx 0;
  text-align: center;
  color: #999;
  font-size: 28rpx;
}

.add-btn {
  position: fixed;
  bottom: 60rpx;
  right: 40rpx;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background-color: #409eff;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 60rpx;
  box-shadow: 0 4rpx 20rpx rgba(64, 158, 255, 0.5);
  .add-icon {
    width: 40rpx;
    height: 40rpx;
    margin-bottom: 8rpx;
  }
}
</style>
